<template>
  <section>
    <label>
        <mdl-checkbox is-checked.bind="raisedButtons" is-indeterminate.bind="isIndeterminate" is-disabled.bind="isFirstCbDisabled" change.delegate="handleChange()"></mdl-checkbox>
        Raised buttons
    </label>
    <label>
        <mdl-checkbox is-checked.bind="accentButtons" is-indeterminate.bind="isIndeterminate" change.delegate="handleChange()"></mdl-checkbox>
        Colored buttons
    </label>
    <label>
        <mdl-checkbox is-checked.bind="disabledButtons" is-indeterminate.bind="isIndeterminate" change.delegate="handleChange()"></mdl-checkbox>
        Disabled buttons
    </label>
    <label>
        <mdl-checkbox is-checked.bind="isFirstCbDisabled" is-indeterminate.bind="isIndeterminate" change.delegate="handleChange()"></mdl-checkbox>
        Disable first checkbox
    </label>
  </section>
  <section>
      <button mdl-ripple mdl-button="accent.bind: accentButtons; raised.bind: raisedButtons;" disabled.bind="disabledButtons" click.delegate="toggleCheckbox()">toggle raised</button>
      <button mdl-ripple="unbounded: true;" mdl-button="accent.bind: accentButtons; raised.bind: raisedButtons;" disabled.bind="disabledButtons || isIndeterminate" click.delegate="makeIndeterminate()">make indeterminate</button>
  </section>
  <section>
      Change events: ${changeEventCount}
  </section>
</template>
